<template>
  <div class="table-main-box">
    <el-table
      :data="tableData"
      row-key="id"
      border
      style="width: 100%"
      height="100%"
      :row-style="tableStyle"
      :header-row-style="headerStyle"
      highlight-current-row
    >
      <el-table-column align="center" prop="id" label="编号" width="60" />
      <el-table-column align="center" prop="creator" label="填报人" width="120">
        <template slot="header" slot-scope="scope">填报人</template>
        <template slot-scope="scope">
          {{ scope.row.creator }}({{ scope.row.empcode }})
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="worktype"
        label="工作类型"
        width="90"
      />
      <el-table-column
        align="center"
        prop="procode"
        label="项目简称"
        width="130"
        show-overflow-tooltip
      >
        <template slot="header" slot-scope="scope">项目简称</template>
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.proname }}</p>
            <div slot="reference" class="name-wrapper">
              {{ scope.row.proshortname }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="createtime"
        label="填报日期"
        width="160"
      />
      <el-table-column
        align="center"
        prop="workcontent"
        label="当日已完成"
        width="230"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="unfinishworktoday"
        label="当日未完成"
        width="230"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="planworktomorrow"
        label="明日计划"
        show-overflow-tooltip
      />
    </el-table>
  </div>
</template>

<script>
import { getStageProjectListApi } from '@/api/index'
export default {
  props: {
    tableData: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      tableStyle: {
        background: 'none',
        width: '150px'
      },
      headerStyle: {
        color: 'black',
        fontSize: '16px'
      },
      openInfo: true
    }
  },
  mounted () {},
  methods: {}
}
</script>

<style lang="scss" >
.table-main-box {
  /* border: 1px solid red; */
  height: 75vh;
}
.el-table {
  /* border: 1px solid red; */

  /* background: #f5f6fa; */
}
.has-gutter > tr > :last-child {
  /* background: red; */
}
.el-popover {
  height: 10px;
  color: #fff;
  line-height: 10px;
  background: #000;
}
.el-table__row:hover {
  cursor: pointer;
}
.el-table__body-wrapper {
  overflow-y: scroll;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 4px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: fade(rgb(78 182 214), 60%);
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
  opacity: 0.2;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  background: fade(rgb(78 182 214), 30%);
  border-radius: 0;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
}
.el-table__body tr.current-row > td {
  background-color: #d0d3d0 !important;
}
</style>